<!DOCTYPE html>
<html>
    <head>
        <title>jQuery Advanced Scrollbar Demo</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="../includes/style.css" />
        <link rel="stylesheet" href="../includes/prettify/prettify.css" />
        <link rel="stylesheet" href="../jquery.scrollbar.css" />

        <script src="../includes/prettify/prettify.js"></script>
        <script src="../includes/jquery.js"></script>
        <script src="../jquery.scrollbar.js"></script>
        <script>
            jQuery(function($){

                function getAlignedText(text){
                    text = text.split('\n');
                    while(text.length > 0 && $.trim(text[0]) == ''){
                        text.shift();
                    }
                    var tabs = (text[0] || '').replace(/^(\s+).+$/, '$1');
                    for(var i=0; i<text.length; i++){
                        text[i] = text[i].replace(tabs, '');
                    }
                    if(text.length > 0 && text[text.length - 1].match(/^\s*$/)){
                        text.pop();
                    }
                    return text.join('\n');
                }

                $('.container').each(function(){

                    var content =  $(this).find('.content');
                    var controls = $(this).find('.controls');

                    $('<pre></pre>').addClass('prettyprint linenums lang-html').text(getAlignedText(content.find('.demo').html())).appendTo(content.find('.html'));
                    $('<pre></pre>').addClass('prettyprint linenums lang-css').text(getAlignedText($('#css-common').html()) + "\n" + getAlignedText(content.find('style').html())).appendTo(content.find('.css'));
                    $('<pre></pre>').addClass('prettyprint linenums lang-js').text(getAlignedText(content.find('script').html())).appendTo(content.find('.js'));

                    controls.on('click', 'span', function(){
                        content.find('.' + $(this).removeClass('active').attr('class')).show().siblings('div').hide();
                        $(this).addClass('active').siblings('span').removeClass('active');
                    });
                    controls.find('.demo').click();
                });

                $('.container').on('click', '.add-content', function(){
                    $('#lorem-ipsum').clone().removeAttr('id').appendTo($(this).closest('.container').find('.scroll-content'));
                    return false;
                });
                $('.container').on('click', '.remove-content', function(){
                    $(this).closest('.container').find('.scroll-content').find('p').not('.permanent').last().remove();
                    return false;
                });

                window.prettyPrint && prettyPrint();
                $('.wrapper').scrollbar();
            });
        </script>

        <script type="text/javascript">
            if(window.location.href.match(/gromo.github.io/i)){
                (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
                        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
                    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
                })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

                ga('create', 'UA-52878040-1', 'auto');
                ga('send', 'pageview');
            }
        </script>

        <style type="text/css">
            .content .demo {
                border: none;
            }
            .content .demo > div {
                height: 400px;
                max-height: none;
                overflow: auto;
                width: 600px;
            }
            .scroll-content img {
                display: block;
            }

            label.theme {
                cursor: pointer;
                margin-right: 14px;
            }
            label.theme input {
                margin-right: 2px;
            }
        </style>

        <style type="text/css" id="css-common">
            /*************** SCROLLBAR BASE CSS ***************/

            .scroll-wrapper {
                overflow: hidden !important;
                padding: 0 !important;
                position: relative;
            }

            .scroll-wrapper > .scroll-content {
                border: none !important;
                box-sizing: content-box !important;
                height: auto;
                left: 0;
                margin: 0;
                max-height: none;
                max-width: none !important;
                overflow: scroll !important;
                padding: 0;
                position: relative !important;
                top: 0;
                width: auto !important;
            }

            .scroll-wrapper > .scroll-content::-webkit-scrollbar {
                height: 0;
                width: 0;
            }

            .scroll-element {
                display: none;
            }
            .scroll-element, .scroll-element div {
                box-sizing: content-box;
            }

            .scroll-element.scroll-x.scroll-scrollx_visible,
            .scroll-element.scroll-y.scroll-scrolly_visible {
                display: block;
            }

            .scroll-element .scroll-bar,
            .scroll-element .scroll-arrow {
                cursor: default;
            }

            .scroll-textarea {
                border: 1px solid #cccccc;
                border-top-color: #999999;
            }
            .scroll-textarea > .scroll-content {
                overflow: hidden !important;
            }
            .scroll-textarea > .scroll-content > textarea {
                border: none !important;
                box-sizing: border-box;
                height: 100% !important;
                margin: 0;
                max-height: none !important;
                max-width: none !important;
                overflow: scroll !important;
                outline: none;
                padding: 2px;
                position: relative !important;
                top: 0;
                width: 100% !important;
            }
            .scroll-textarea > .scroll-content > textarea::-webkit-scrollbar {
                height: 0;
                width: 0;
            }




        </style>
    </head>
    <body>
        <div class="wrapper scrollbar-dynamic">
            <div class="page-content">

                <h1>Advanced Scrollbars</h1>

                <a href="basic.html">Basic Scrollbars Demo</a><br/>
                <a href="angular.html">jQuery Scrollbars as Angular.JS directive</a><br/>
                <a href="../">&laquo; Back to home</a>

                <div class="container">
                    <h2>Microsoft Windows Vista</h2>
                    <div class="controls">
                        <span class="demo">DEMO</span>
                        <span class="html">HTML</span>
                        <span class="css">CSS</span>
                        <span class="js">JS</span>
                        <button onclick="jQuery('.scrollbar-vista').scrollbar('destroy');">Destroy</button>
                    </div>
                    <div class="content">
                        <style type="text/css">

                            /******************* WINDOWS VISTA SCROLLBAR *******************/

                            .scrollbar-vista > .scroll-content.scroll-scrolly_visible { left: -17px; margin-left: 17px; }
                            .scrollbar-vista > .scroll-content.scroll-scrollx_visible { top:  -17px; margin-top:  17px; }


                            .scrollbar-vista > .scroll-element {
                                background-color: #fcfdff;
                            }

                            .scrollbar-vista > .scroll-element,
                            .scrollbar-vista > .scroll-element div
                            {
                                border: none;
                                margin: 0;
                                overflow: hidden;
                                padding: 0;
                                position: absolute;
                                z-index: 10;
                            }

                            .scrollbar-vista > .scroll-element .scroll-element_outer,
                            .scrollbar-vista > .scroll-element .scroll-element_size,
                            .scrollbar-vista > .scroll-element .scroll-element_inner-wrapper,
                            .scrollbar-vista > .scroll-element .scroll-element_inner,
                            .scrollbar-vista > .scroll-element .scroll-bar,
                            .scrollbar-vista > .scroll-element .scroll-bar div
                            {
                                height: 100%;
                                left: 0;
                                top: 0;
                                width: 100%;
                            }

                            .scrollbar-vista > .scroll-element .scroll-element_outer,
                            .scrollbar-vista > .scroll-element .scroll-element_size,
                            .scrollbar-vista > .scroll-element .scroll-element_inner-wrapper,
                            .scrollbar-vista > .scroll-element .scroll-bar_body
                            {
                                background: none !important;
                            }


                            .scrollbar-vista > .scroll-element.scroll-x {
                                border-top: solid 1px #fcfdff;
                                bottom: 0;
                                height: 16px;
                                left: 0;
                                min-width: 100%;
                                width: 100%;
                            }

                            .scrollbar-vista > .scroll-element.scroll-y {
                                border-left: solid 1px #fcfdff;
                                height: 100%;
                                min-height: 100%;
                                right: 0;
                                top: 0;
                                width: 16px;
                            }

                            .scrollbar-vista > .scroll-element.scroll-x div {
                                background-image: url('skins/vista-x.png');
                                background-repeat: repeat-x;
                            }

                            .scrollbar-vista > .scroll-element.scroll-y div {
                                background-image: url('skins/vista-y.png');
                                background-repeat: repeat-y;
                            }

                            .scrollbar-vista > .scroll-element.scroll-x .scroll-arrow {}

                            .scrollbar-vista > .scroll-element.scroll-x .scroll-bar { min-width: 16px; background-position: 0px -34px; background-repeat: no-repeat; }
                            .scrollbar-vista > .scroll-element.scroll-x .scroll-bar_body { left: 2px; }
                            .scrollbar-vista > .scroll-element.scroll-x .scroll-bar_body-inner { left: -4px; background-position: 0px -17px; }
                            .scrollbar-vista > .scroll-element.scroll-x .scroll-bar_center { left: 50%; margin-left: -6px; width: 12px; background-position: 24px -34px; }
                            .scrollbar-vista > .scroll-element.scroll-x .scroll-bar_bottom { left: auto; right: 0; width: 2px; background-position: 37px -34px; }


                            .scrollbar-vista > .scroll-element.scroll-y .scroll-bar { min-height: 16px; background-position: -34px 0px; background-repeat: no-repeat; }
                            .scrollbar-vista > .scroll-element.scroll-y .scroll-bar_body { top: 2px; }
                            .scrollbar-vista > .scroll-element.scroll-y .scroll-bar_body-inner { top: -4px; background-position: -17px 0px; }
                            .scrollbar-vista > .scroll-element.scroll-y .scroll-bar_center { top: 50%; margin-top: -6px; height: 12px; background-position: -34px 24px; }
                            .scrollbar-vista > .scroll-element.scroll-y .scroll-bar_bottom { top: auto; bottom: 0; height: 2px; background-position: -34px 37px; }



                            /* SCROLL ARROWS */

                            .scrollbar-vista > .scroll-element .scroll-arrow { display: none; }
                            .scrollbar-vista > .scroll-element.scroll-element_arrows_visible .scroll-arrow { display: block; z-index: 12; }


                            .scrollbar-vista > .scroll-element.scroll-x.scroll-element_arrows_visible .scroll-arrow_less { height: 100%; width: 17px; background-position: 0px -51px;}
                            .scrollbar-vista > .scroll-element.scroll-x.scroll-element_arrows_visible .scroll-arrow_more { height: 100%; left: auto; right: 0; width: 17px; background-position: 17px -51px;}

                            .scrollbar-vista > .scroll-element.scroll-x.scroll-element_arrows_visible .scroll-element_outer { left: 17px; }
                            .scrollbar-vista > .scroll-element.scroll-x.scroll-element_arrows_visible .scroll-element_inner { left: -34px; }
                            .scrollbar-vista > .scroll-element.scroll-x.scroll-element_arrows_visible .scroll-element_size { left: -34px; }


                            .scrollbar-vista > .scroll-element.scroll-y.scroll-element_arrows_visible .scroll-arrow_less { width: 100%; height: 17px; background-position: -51px 0px;}
                            .scrollbar-vista > .scroll-element.scroll-y.scroll-element_arrows_visible .scroll-arrow_more { width: 100%; top: auto; bottom: 0; height: 17px; background-position: -51px 17px;}

                            .scrollbar-vista > .scroll-element.scroll-y.scroll-element_arrows_visible .scroll-element_outer { top: 17px; }
                            .scrollbar-vista > .scroll-element.scroll-y.scroll-element_arrows_visible .scroll-element_inner { top: -34px; }
                            .scrollbar-vista > .scroll-element.scroll-y.scroll-element_arrows_visible .scroll-element_size { top: -34px; }


                            /* PROCEED OFFSET IF ANOTHER SCROLL VISIBLE */

                            .scrollbar-vista > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -17px; }
                            .scrollbar-vista > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -17px; }

                            .scrollbar-vista > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_inner { left: -17px; }
                            .scrollbar-vista > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_inner { top: -17px; }


                            /* PROCEED OFFSET IF ARROWS & ANOTHER SCROLL */

                            .scrollbar-vista > .scroll-element.scroll-x.scroll-element_arrows_visible.scroll-scrolly_visible .scroll-arrow_more { right: 17px;}
                            .scrollbar-vista > .scroll-element.scroll-x.scroll-element_arrows_visible.scroll-scrolly_visible .scroll-element_inner { left: -51px;}
                            .scrollbar-vista > .scroll-element.scroll-x.scroll-element_arrows_visible.scroll-scrolly_visible .scroll-element_size { left: -51px;}


                            .scrollbar-vista > .scroll-element.scroll-y.scroll-element_arrows_visible.scroll-scrollx_visible .scroll-arrow_more { bottom: 17px;}
                            .scrollbar-vista > .scroll-element.scroll-y.scroll-element_arrows_visible.scroll-scrollx_visible .scroll-element_inner { top: -51px;}
                            .scrollbar-vista > .scroll-element.scroll-y.scroll-element_arrows_visible.scroll-scrollx_visible .scroll-element_size { top: -51px;}
                        </style>
                        <script type="text/javascript">
                            jQuery(document).ready(function(){
                                jQuery('.scrollbar-vista').scrollbar({
                                    "showArrows": true,
                                    "scrollx": "advanced",
                                    "scrolly": "advanced"
                                });
                            });
                        </script>
                        <div class="demo">
                            <div class="scrollbar-vista">
                                <img src="../includes/tarzan.jpg" height="2100" width="2800">
                            </div>
                        </div>
                        <div class="html"></div>
                        <div class="css"></div>
                        <div class="js"></div>
                    </div>
                </div>

                <div class="container">
                    <h2>External</h2>
                    <p>External scrollbars can be located in any place inside or outside of scrollable container</p>
                    <div class="controls">
                        <span class="demo">DEMO</span>
                        <span class="html">HTML</span>
                        <span class="css">CSS</span>
                        <span class="js">JS</span>
                    </div>
                    <div class="content">
                        <style type="text/css">

                            .scrollbar-external_wrapper {
                                height: 450px !important;
                                position: relative;
                                width: auto !important;
                            }
                            .scrollbar-external {
                                height: 400px;
                                overflow: auto;
                                width: 600px;
                            }

                            /******************* EXTERNAL SCROLLBAR *******************/

                            .external-scroll_x,
                            .external-scroll_y {
                                border: solid 1px #9999fc;
                                cursor: pointer;
                                display: none;
                                position: absolute;
                            }

                            .external-scroll_x.scroll-scrollx_visible {
                                display: block;
                                height: 10px;
                                left: 0;
                                top: 410px;
                                width: 200px;
                            }

                            .external-scroll_y.scroll-scrolly_visible {
                                display: block;
                                height: 200px;
                                left: 610px;
                                top: 0;
                                width: 10px;
                            }

                            .external-scroll_x div,
                            .external-scroll_y div
                            {
                                height: 100%;
                                left: 0;
                                top: 0;
                                position: absolute;
                                width: 100%;
                            }

                            .external-scroll_x .scroll-bar,
                            .external-scroll_y .scroll-bar {
                                background: #9999fc;
                                z-index: 12;
                            }

                            .external-scroll_x .scroll-bar {
                                width: 100px;
                            }
                            .external-scroll_y .scroll-bar {
                                height: 100px;
                            }
                        </style>
                        <script type="text/javascript">
                            jQuery(document).ready(function(){
                                jQuery('.scrollbar-external').scrollbar({
                                    "autoScrollSize": false,
                                    "scrollx": $('.external-scroll_x'),
                                    "scrolly": $('.external-scroll_y')
                                });
                            });
                        </script>
                        <div class="demo">
                            <div class="scrollbar-external_wrapper">
                                <div class="scrollbar-external">
                                    <img src="../includes/tarzan.jpg">
                                </div>

                                <div class="external-scroll_x">
                                    <div class="scroll-element_outer">
                                        <div class="scroll-element_size"></div>
                                        <div class="scroll-element_track"></div>
                                        <div class="scroll-bar"></div>
                                    </div>
                                </div>

                                <div class="external-scroll_y">
                                    <div class="scroll-element_outer">
                                        <div class="scroll-element_size"></div>
                                        <div class="scroll-element_track"></div>
                                        <div class="scroll-bar"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="html"></div>
                        <div class="css"></div>
                        <div class="js"></div>
                    </div>
                </div>

                <div class="container">
                    <h2>Page Map</h2>
                    <p>Page Map is resizable scrollbar that combinates both horizontal and vertical scrollbars in one element</p>
                    <div class="controls">
                        <span class="demo">DEMO</span>
                        <span class="html">HTML</span>
                        <span class="css">CSS</span>
                        <span class="js">JS</span>
                        <button onclick="$('.scrollbar-map img').css({'height':'2100px','width':'2800px'});">Resize</button>
                        <button onclick="$('.scrollbar-map img').css({'height':'600px','width':'800px'});">Original</button>
                    </div>
                    <div class="content">
                        <style type="text/css">

                            /******************* PAGE THUMBNAIL SCROLLBAR *******************/

                            .scrollbar-map > .scroll-element_outer {
                                display: none;
                                height: 100px;
                                position: absolute;
                                right: 10px;
                                top: 10px;
                                width: 100px;
                            }
                            .scrollbar-map > .scroll-element_outer .scroll-element_size,
                            .scrollbar-map > .scroll-element_outer .scroll-element_track {
                                background-color: #999;
                                background-color: rgba(153, 153, 153, 0.4);
                                height: 100%;
                                position: absolute;
                                right: 0;
                                top: 0;
                                width: 100%;
                            }
                            .scrollbar-map > .scroll-element_outer .scroll-bar {
                                background-color: #CCC;
                                background-color: rgba(204, 204, 204, 0.5);
                                height: 100%;
                                position: absolute;
                                left: 0;
                                top: 0;
                                width: 100%;
                            }

                            .scrollbar-map > .scroll-element_outer.scroll-scrollx_visible,
                            .scrollbar-map > .scroll-element_outer.scroll-scrolly_visible {
                                display: block;
                            }


                        </style>
                        <script type="text/javascript">
                            /**
                             * Get inscribed area size
                             *
                             * @param int oW outer width
                             * @param int oH outer height
                             * @param int iW inner width
                             * @param int iH inner height
                             * @param bool R resize if smaller
                             */
                            function getInscribedArea(oW, oH, iW, iH, R){
                                if(!R && iW < oW && iH < oH){
                                    return {
                                        "h": iH,
                                        "w": iW
                                    };
                                }
                                if((oW / oH) > (iW / iH)){
                                    return {
                                        "h": oH,
                                        "w": Math.round(oH * iW / iH)
                                    }
                                } else {
                                    return {
                                        "h": Math.round(oW * iH / iW),
                                        "w": oW
                                    };
                                }
                            }

                            jQuery(document).ready(function(){
                                jQuery('.scrollbar-map').scrollbar({
                                    "onInit": function(){
                                        this.container.find('.scroll-element_outer').appendTo(this.wrapper);
                                    },
                                    "onUpdate": function(container){
                                        var s = getInscribedArea(140, 140, this.scrollx.size, this.scrolly.size);
                                        this.scrolly.scroll.height(s.h);
                                        this.scrollx.scroll.width(s.w);
                                    },
                                    "scrollx": $('.scrollbar-map .scroll-element_outer'),
                                    "scrolly": $('.scrollbar-map .scroll-element_outer'),
                                    "stepScrolling": false
                                });
                            });
                        </script>
                        <div class="demo">
                            <div class="scrollbar-map">
                                <div class="scroll-element_outer">
                                    <div class="scroll-element_size">
                                        <div class="scroll-element_track"></div>
                                        <div class="scroll-bar"></div>
                                    </div>
                                </div>
                                <img src="../includes/tarzan.jpg" height="900" width="1200">
                            </div>
                        </div>
                        <div class="html"></div>
                        <div class="css"></div>
                        <div class="js"></div>
                    </div>
                </div>


                <div class="container">
                    <h2>Janos Scrollbar</h2>
                    <p>Janos Scrollbar uses design from
                        <a href="http://users.atw.hu/nokiss/formstyle.html" target="_blank">Janos custom form elements</a></p>
                    <div class="controls">
                        <span class="demo">DEMO</span>
                        <span class="html">HTML</span>
                        <span class="css">CSS</span>
                        <span class="js">JS</span>
                    </div>
                    <div>
                        <label class="theme"><input type="radio" name="janos-theme" value="theme-blue" checked="checked">Blue</label>
                        <label class="theme"><input type="radio" name="janos-theme" value="theme-woods">Woods</label>
                        <label class="theme"><input type="radio" name="janos-theme" value="theme-paint4">Paint 4</label>
                        <label class="theme"><input type="radio" name="janos-theme" value="theme-palace3">Palace 3</label>
                        <label class="theme"><input type="radio" name="janos-theme" value="theme-dark">Dark</label>
                        <label class="theme"><input type="radio" name="janos-theme" value="theme-sprites">Sprites</label>
                        <script type="text/javascript">
                            jQuery(function($){
                                var currentTheme = 'theme-blue';
                                $('input:radio[name="janos-theme"]').on('change', function(){
                                    $('.scrollbar-janos').removeClass(currentTheme);
                                    currentTheme = $(this).val();
                                    $('.scrollbar-janos').addClass(currentTheme);
                                }).eq(0).prop('checked', true).change();
                            });
                        </script>
                    </div>
                    <div class="content">
                        <style type="text/css">

                            .scrollbar-janos.theme-blue > .scroll-element,
                            .scrollbar-janos.theme-blue > .scroll-element .scroll-bar,
                            .scrollbar-janos.theme-blue > .scroll-element .scroll-element_corner,
                            .scrollbar-janos.theme-blue > .scroll-element .scroll-element_track
                            { background-color: #66CCEE; }

                            .scrollbar-janos.theme-woods > .scroll-element,
                            .scrollbar-janos.theme-woods > .scroll-element .scroll-bar,
                            .scrollbar-janos.theme-woods > .scroll-element .scroll-element_corner,
                            .scrollbar-janos.theme-woods > .scroll-element .scroll-element_track
                            { background-color: #5F7C7F; }

                            .scrollbar-janos.theme-paint4 > .scroll-element,
                            .scrollbar-janos.theme-paint4 > .scroll-element .scroll-bar,
                            .scrollbar-janos.theme-paint4 > .scroll-element .scroll-element_corner,
                            .scrollbar-janos.theme-paint4 > .scroll-element .scroll-element_track
                            { background-color: #5566AA; }

                            .scrollbar-janos.theme-palace3 > .scroll-element,
                            .scrollbar-janos.theme-palace3 > .scroll-element .scroll-bar,
                            .scrollbar-janos.theme-palace3 > .scroll-element .scroll-element_corner,
                            .scrollbar-janos.theme-palace3 > .scroll-element .scroll-element_track
                            { background-color: #028B54; }

                            .scrollbar-janos.theme-dark > .scroll-element,
                            .scrollbar-janos.theme-dark > .scroll-element .scroll-bar,
                            .scrollbar-janos.theme-dark > .scroll-element .scroll-element_corner,
                            .scrollbar-janos.theme-dark > .scroll-element .scroll-element_track
                            { background-color: #999999; }

                            .scrollbar-janos.theme-sprites > .scroll-element,
                            .scrollbar-janos.theme-sprites > .scroll-element .scroll-bar,
                            .scrollbar-janos.theme-sprites > .scroll-element .scroll-element_corner,
                            .scrollbar-janos.theme-sprites > .scroll-element .scroll-element_track
                            { background-color: #BBBBBB; }


                            /******************* JANOS SCROLLBAR *******************/

                            .scrollbar-janos > .scroll-element,
                            .scrollbar-janos > .scroll-element div
                            {
                                border: none;
                                margin: 0;
                                overflow: hidden;
                                padding: 0;
                                position: absolute;
                                z-index: 10;
                            }

                            .scrollbar-janos > .scroll-element div {
                                background-color: transparent;
                                display: block;
                                height: 100%;
                                left: 0;
                                top: 0;
                                width: 100%;
                            }

                            .scrollbar-janos > .scroll-element.scroll-x {
                                border-top: 1px solid #AAAAAA;
                                bottom: 0;
                                height: 16px;
                                left: 0;
                                min-width: 100%;
                                width: 100%;
                            }

                            .scrollbar-janos > .scroll-element.scroll-y {
                                border-left: 1px solid #AAAAAA;
                                height: 100%;
                                min-height: 100%;
                                right: 0;
                                top: 0;
                                width: 16px;
                            }

                            .scrollbar-janos > .scroll-element .scroll-element_corner {
                                display: none;
                            }

                            .scrollbar-janos > .scroll-element.scroll-x,
                            .scrollbar-janos > .scroll-element.scroll-x .scroll-bar {
                                background-image: url();
                                background-repeat: repeat-x;
                            }
                            .scrollbar-janos > .scroll-element.scroll-x .scroll-bar {
                                box-shadow: 0 1px 2px, 0 -1px 1px rgba(255, 255, 255, 0.8);
                            }
                            .scrollbar-janos > .scroll-element.scroll-y,
                            .scrollbar-janos > .scroll-element.scroll-y .scroll-bar {
                                background-image: url();
                                background-repeat: repeat-y;
                            }
                            .scrollbar-janos > .scroll-element.scroll-y .scroll-bar {
                                box-shadow: 0 1px 2px, 0 -1px 1px rgba(255, 255, 255, 0.8);
                            }

                            .scrollbar-janos > .scroll-element.scroll-x .scroll-element_track {
                                background-image: url();
                                background-repeat: repeat-x;
                            }
                            .scrollbar-janos > .scroll-element.scroll-y .scroll-element_track {
                                background-image: url();
                                background-repeat: repeat-y;
                            }
                            .scrollbar-janos > .scroll-element.scroll-x .scroll-bar .scroll-bar_body {
                                background-image: url();
                            }
                            .scrollbar-janos > .scroll-element.scroll-y .scroll-bar .scroll-bar_body {
                                background-image: url();
                            }
                            .scrollbar-janos > .scroll-element.scroll-x .scroll-arrow_less {
                                background-image: url();
                                box-shadow: 0 1px 2px, 0 -1px 1px rgba(255, 255, 255, 0.8);
                            }
                            .scrollbar-janos > .scroll-element.scroll-x .scroll-arrow_more {
                                background-image: url();
                            }
                            .scrollbar-janos > .scroll-element.scroll-y .scroll-arrow_less {
                                background-image: url();
                                box-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
                            }
                            .scrollbar-janos > .scroll-element.scroll-y .scroll-arrow_more {
                                background-image: url();
                            }

                            .scrollbar-janos > .scroll-element .scroll-arrow,
                            .scrollbar-janos > .scroll-element .scroll-bar_body {
                                background-position: center;
                                background-repeat: no-repeat;
                            }

                            .scrollbar-janos > .scroll-content.scroll-scrolly_visible { left: -17px; margin-left: 17px; }
                            .scrollbar-janos > .scroll-content.scroll-scrollx_visible { top:  -17px; margin-top:  17px; }

                            /* scrollbar arrows */

                            .scrollbar-janos > .scroll-element .scroll-arrow { display: none; }
                            .scrollbar-janos > .scroll-element.scroll-element_arrows_visible .scroll-arrow { display: block; z-index: 12; }

                            .scrollbar-janos > .scroll-element.scroll-x.scroll-element_arrows_visible .scroll-arrow_less { height: 100%; width: 16px;}
                            .scrollbar-janos > .scroll-element.scroll-x.scroll-element_arrows_visible .scroll-arrow_more { height: 100%; left: auto; right: 0; width: 16px;}

                            .scrollbar-janos > .scroll-element.scroll-x.scroll-element_arrows_visible .scroll-element_outer { left: 16px; }
                            .scrollbar-janos > .scroll-element.scroll-x.scroll-element_arrows_visible .scroll-element_track { left: -32px; }
                            .scrollbar-janos > .scroll-element.scroll-x.scroll-element_arrows_visible .scroll-element_size { left: -33px; }

                            .scrollbar-janos > .scroll-element.scroll-y.scroll-element_arrows_visible .scroll-arrow_less { width: 100%; height: 16px;}
                            .scrollbar-janos > .scroll-element.scroll-y.scroll-element_arrows_visible .scroll-arrow_more { width: 100%; top: auto; bottom: 0; height: 16px;}

                            .scrollbar-janos > .scroll-element.scroll-y.scroll-element_arrows_visible .scroll-element_outer { top: 16px; }
                            .scrollbar-janos > .scroll-element.scroll-y.scroll-element_arrows_visible .scroll-element_track { top: -32px; }
                            .scrollbar-janos > .scroll-element.scroll-y.scroll-element_arrows_visible .scroll-element_size { top: -33px; }

                            /* if another scrollbar is visible */

                            .scrollbar-janos > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -17px; }
                            .scrollbar-janos > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -17px; }

                            .scrollbar-janos > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_inner { left: -17px; }
                            .scrollbar-janos > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_inner { top: -17px; }

                            /* if arrows & another scrollbar are visible */

                            .scrollbar-janos > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_corner,
                            .scrollbar-janos > .scroll-element.scroll-y.scroll-element_arrows_visible.scroll-scrollx_visible .scroll-element_corner {
                                border-top: 1px solid #AAAAAA;
                                bottom: 0;
                                display: block;
                                height: 16px;
                                left: auto;
                                right: 0;
                                top: auto;
                                width: 16px;
                                z-index: 13;
                            }

                            .scrollbar-janos > .scroll-element.scroll-x.scroll-element_arrows_visible.scroll-scrolly_visible .scroll-arrow_more { right: 17px;}
                            .scrollbar-janos > .scroll-element.scroll-x.scroll-element_arrows_visible.scroll-scrolly_visible .scroll-element_track { left: -50px;}
                            .scrollbar-janos > .scroll-element.scroll-x.scroll-element_arrows_visible.scroll-scrolly_visible .scroll-element_size { left: -51px;}


                            .scrollbar-janos > .scroll-element.scroll-y.scroll-element_arrows_visible.scroll-scrollx_visible .scroll-arrow_more { bottom: 17px;}
                            .scrollbar-janos > .scroll-element.scroll-y.scroll-element_arrows_visible.scroll-scrollx_visible .scroll-element_track { top: -50px;}
                            .scrollbar-janos > .scroll-element.scroll-y.scroll-element_arrows_visible.scroll-scrollx_visible .scroll-element_size { top: -51px;}


                        </style>
                        <script type="text/javascript">
                            jQuery(document).ready(function(){
                                jQuery('.scrollbar-janos').scrollbar({
                                    "showArrows": true,
                                    "scrollx": "advanced",
                                    "scrolly": "advanced"
                                });
                            });
                        </script>
                        <div class="demo">
                            <div class="scrollbar-janos theme-blue">
                                <img src="../includes/tarzan.jpg" height="2100" width="2800">
                            </div>
                        </div>
                        <div class="html"></div>
                        <div class="css"></div>
                        <div class="js"></div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>
